<template>
    <div class="layout-flex">
        <div class="layout-head" v-if="route.params.type == 'detail'">
            <div>
                <strong>{{ state.submitData.inboundOrderCode || '-' }}</strong>
                <SvgIcon name="ele-CopyDocument" :size="12" class="ml5"
                    @click="copyText(state.submitData.inboundOrderCode)" />
                <el-tag class="ml10" :type="approveStatusTagType[state.submitData.deliveryOrderStatus || '1'].type">{{
                    approveStatusTagType[state.submitData.deliveryOrderStatus || '1'].label ||
                    '-' }}</el-tag>
            </div>
        </div>
        <div class="layout-padding">
            <div class="ppd">
                <el-form :label-width="160" label-suffix="：" :model="state.submitData"
                    :disabled="route.params.type == 'detail'">
                    <div>
                        <div class="basic-info-head">基本信息</div>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="入库单号">
                                    {{ state.submitData.inboundOrderCode }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="入库类型">
                                    {{ whTypeToList[state.submitData.whTypeTo] }}

                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="入库仓">
                                    <Tc style="width: 100%">
                                        {{ state.submitData.whNameTo }}
                                    </Tc>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="入库单状态">
                                    {{ statusCodeList[state.submitData.statusCode] }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="来源单号">
                                    {{ state.submitData.sourceCode }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="计划入库数">
                                    {{ state.submitData.deliveryNumTotal }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="已入库总数">
                                    {{ state.submitData.receivedNumTotal || '0' }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="备注">
                                    {{ state.submitData.remark || '-' }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <el-tabs v-model="state.activeName" class="shipping-tabs mb10">
                        <el-tab-pane label="产品信息" name="first">
                        </el-tab-pane>
                        <el-tab-pane label="包裹信息" name="secth">
                            <el-table :data="state.submitData.tripartitePackItemList">
                                <el-table-column label="图片" width="80">
                                    <template #default="{ row }">
                                        <div class="list-image">
                                            <ewt-image :url="row.picUrl"
                                                style="width: 36px; height: 36px; object-fit: contain; display: block" />
                                            <div class="tag-combination" v-if="row.skuType === '2'">组</div>
                                            <div class="JI ml5" v-if="row.urgencyFlag == 1">急</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="品名/SKU">
                                    <template #default="{ row }">
                                        <NameAndSku :data="row" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="MSKU/FNSKU">
                                    <template #default="{ row }">
                                        <p>{{ row.mskuCode || '-' }}</p>
                                        <p>{{ row.fnsku || '-' }}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="发货量" prop="deliveryTotal"> </el-table-column>
                                <el-table-column label="总净重（kg）"  prop="netWeightTotal"> </el-table-column>
                                <el-table-column label="总体积CBM" prop="volumeTotal" width="120"> </el-table-column>     
                                <el-table-column label="箱号" prop="boxNo" width="120"> </el-table-column>                                
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="操作日志" name="forth">
                        </el-tab-pane>
                    </el-tabs>
                    <div class="layout-padding" v-if="state.activeName == 'first'">
                        <el-table :data="state.submitData.children" style="max-height: 512px">
                            <el-table-column v-for="col in columns['prodList']" :label="col.name"
                                :prop="col.prop || 'picUrl'" :fixed="col.fixed ? col.fixed : false"
                                :min-width="col.width ? col.width : '180'" :sortable="col.sortable"
                                :show-overflow-tooltip="col.showTip">
                                <template #default="{ row }" v-if="col.name == '图片'">
                                    <div class="list-image">
                                        <ewt-image :url="row.picUrl"
                                            style="width: 36px; height: 36px; object-fit: contain; display: block" />
                                        <div class="tag-combination" v-if="row.skuType === '2'">组</div>

                                        <div class="JI ml5" v-if="row.urgencyFlag == 1">急</div>
                                    </div>
                                </template>
                                <template #default="{ row }" v-if="col.name == 'MSKU/FNSKU'">
                                    <div style="width: 140px">
                                        <p>{{ row.mskuCode || '-' }}</p>
                                        <p>{{ row.fnsku || '-' }}</p>
                                    </div>
                                </template>
                                <template #default="{ row }" v-if="col.name == '品名/SKU'">
                                    <NameAndSku :data="row" :dialogRef="SkuDetailDialogRef" />
                                </template>
                            </el-table-column>

                        </el-table>
                    </div>

                    <div class="layout-padding" v-if="state.activeName == 'third'">
                        <el-table :data="state.submitData.apportionChildren" style="max-height: 512px">
                            <el-table-column v-for="col in columns['CBFT']" :label="col.name" :prop="col.prop || 'picUrl'"
                                :fixed="col.fixed ? col.fixed : false" :min-width="col.width ? col.width : '180'"
                                :sortable="col.sortable" :show-overflow-tooltip="col.showTip">
                                <template #default="{ row }" v-if="col.name == '图片'">
                                    <div class="list-image">
                                        <ewt-image :url="row.picUrl"
                                            style="width: 36px; height: 36px; object-fit: contain; display: block" />
                                        <div class="tag-combination" v-if="row.skuType === '2'">组</div>

                                        <div class="JI ml5" v-if="row.urgencyFlag == 1">急</div>
                                    </div>
                                </template>
                                <template #default="{ row }" v-if="col.name == 'MSKU/FNSKU'">
                                    <div style="width: 140px">
                                        <p>{{ row.mskuCode || '-' }}</p>
                                        <p>{{ row.fnsku || '-' }}</p>
                                    </div>
                                </template>
                                <template #default="{ row }" v-if="col.name == '品名/SKU'">
                                    <NameAndSku :data="row" :dialogRef="SkuDetailDialogRef" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </el-form>
                <div>
                    <OperateLog v-if="state.activeName == 'forth'" :info-data="{
                        busId: route.params.id,
                    }" ref="operationLogRef" />

                </div>
                <div class="pageFooter">
                    <el-button @click="cancel">取消</el-button>
                </div>
            </div>
            <SkuDetailDialog ref="SkuDetailDialogRef" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { columns } from './components/tableList/columnsSetting/columns.js'
import { approveStatusTagType } from './option.json'

const SkuDetailDialogRef = ref()

const { proxy } = getCurrentInstance()
const { copyText } = proxy.CommonFunction();

const statusCodeList = {
    0: '待下单',
    1: '待入库',
    2: '部分入库',
    3: '已完成',
    4: '已取消',
    5: '已作废'
}

const whTypeToList = {
    2: '自营仓',
    3: '三方仓',
    4: '平台仓',
}


import request from '/@/utils/request';
const getById = (params?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/getById',
        method: 'get',
        params
    });
}

const state = reactive({
    currencyList: [],
    way: '0',
    yx: '1',
    data: [],
    sizeList: [{}],
    submitData: {},
    activeName: 'first',
})



const route = useRoute();


onMounted(() => {

    let params = {
        id: route.params.id
    }
    getById(params).then(res => {
        state.submitData = res.data
        if (!state.submitData.deliveryPackItemList) {
            state.submitData.deliveryPackItemList = []
        }
    })

})

import mittBus from "/@/utils/mitt";

const cancel = () => {
    mittBus.emit(
        "onCurrentContextmenuClick",
        Object.assign({}, { contextMenuClickId: 1, ...route })
    );
}


const packListRef = ref()

</script>

<style lang="scss" scope>
.layout-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px 20px;
}

.ppd {
    overflow: auto;
    padding: 15px 15px 5px 15px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 1px 1px 1px -1px #aaa;
    flex: 1;

    .btwrap {
        background-color: #fff;

        .settings {
            min-width: 1420px;
            padding: 20px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .otherSettings {

            >div {
                display: flex;
            }
        }
    }

}

.el-step__icon-inner {
    font-size: 16px !important;
}

.boxinput {
    border: 1px solid #eee;
    width: 60px;
    height: 30px;
    padding: 8px;
    border-radius: 4px;
}

.lefthandle {
    width: 840px;
    display: flex;
    flex-direction: row-reverse;

    >div {
        display: flex;
        padding: 8px 0;
    }
}

.lineone {
    display: flex;
}


.boxes {
    display: flex;
    padding: 8px 0;
}

.table-cellh {
    padding: 0 12px;
    text-align: left;
}

.w180 {
    width: 180px
}

.w160 {
    width: 160px !important;
}

.w110 {
    width: 110px !important;
}

.zxLay {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
}

.zxLayYz {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
}

.zxBot {
    display: flex;
    justify-content: flex-end;
}

.zxLeft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 38px;
    margin-bottom: 8px;
}

.singlePack {
    display: flex;
    align-items: center;
}

.lastTr {
    display: flex;
    flex-direction: column;
    padding-bottom: 18px;
}

.el-form .el-form-item:last-of-type {
    margin-bottom: 18px !important;
}


.basic-info-head {
    position: relative;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: #0b1019;
    padding-left: 10px;
    margin-bottom: 20px;
    display: flex;

    &:before {
        content: ' ';
        display: inline-block;
        position: absolute;
        top: 5px;
        left: 0;
        height: 14px;
        width: 2px;
        background: #005bf5;
    }
}

.combInput {
    display: flex;
    align-items: center;

    .afterfix {
        width: 88px
    }
}

.pophandles {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tt {

    .el-input-group__append,
    .el-input-group__prepend {
        padding: 0;
    }
}

.other .el-upload-list__item-info {
    width: auto !important;
}
</style>